<template>
	<view>
		<view class="me-integral-box">
			<view class="back-left-icon" @click.stop="routerBack()"><u-icon name="arrow-left" color="white" size="50"></u-icon></view>
			<view class="integral-box">
				<view class="integral-num">{{ userInfo.score }}</view>
				<view class="integral-name">我的积分</view>
			</view>
		</view>

		<view class="integral-rules-box">
			<view class="l-rules">
				<view class="rules-logo-img"><image src="https://duomi.bigchun.com/images/vip/vip-icon-5.png"></image></view>
				<view class="l-r-content">
					<view class="rules-name">积分规则</view>
					<view class="rules-desc">分享一人注册会员：<text>{{ addScore }}积分</text></view>
				</view>
			</view>
			<view class="r-share-btn" @click="$Router.push({ path: '/pages/user/share-page' })">去邀请</view>
		</view>

		<view class="integral-list-box">
			<view class="top-title-box">
				<view class="t-title">积分记录</view>
				<view class="t-desc">做任务赚取积分</view>
			</view>
			<view class="integral-list">
				<view class="integral-l-item" v-for="(item,index) in scoreList" :key="index">
					<view class="integral-l-box">
						<view class="integral-l-name">{{ item.name }}</view>
						<view class="integral-l-label">邀请人微信号：{{ item.pnickname }}</view>
						<view class="integral-l-time">{{ $tools.getdateNoTime(item.createtime * 1000) }}</view>
					</view>
					<view class="integral-r-num">+{{ item.score }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				addScore: 0,
				page: 1,
				total: 0,
				scoreList: []
			}
		},
		onLoad() {
			if (uni.getStorageSync('userInfo')) this.userInfo = uni.getStorageSync('userInfo');
			this.initTextInfo()
			this.initScoreList()
		},
		methods: {
			initTextInfo() {
				this.$https('vip.getXieInfo', {
					type: 2,
				}).then(res => {
					if (res.code) {
						this.addScore = res.data
					}
				})
			},

			initScoreList() {
				let { page } = this;
				this.$https('vip.scoreList', {
					page
				}).then(res => {
					if (res.code) {
						let { count, list } = res.data
						this.total = count
						this.scoreList.push(...list)
					}
				})
			},

			routerBack() {
				uni.navigateBack()
			}
		},
		onReachBottom() {
			let { list, count } = this
			if (list.length < count) {
				++this.page
				this.initVipList()
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.me-integral-box {
	width: 100%;
	height: 424rpx;
	background-image: url('');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	.back-left-icon {
		position: absolute;
		left: 40rpx;
		top: 110rpx;
	}
	.integral-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		.integral-num {
			font-size: 72rpx;
			color: white;
			margin-bottom: 12rpx;
		}
		.integral-name {
			font-size: 28rpx;
			color: white;
			font-weight: 500;
		}
	}
}
.integral-rules-box {
	width: 690rpx;
	padding: 24rpx 20rpx;
	background-color: white;
	border-radius: 20rpx;
	margin: -40rpx auto 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 9;
	.l-rules {
		display: flex;
		align-items: center;
		.rules-logo-img {
			width: 96rpx;
			height: 92rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.l-r-content {
			.rules-name {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.rules-desc {
				font-size: 28rpx;
				color: #666666;
				text {
					color: #FF6121;
				}
			}
		}
	}
	.r-share-btn {
		padding: 6rpx 10rpx;
		background-color: #FFEAD1;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #FF6121;
		font-weight: 500;
	}

}
.integral-list-box {
	width: 702rpx;
	min-height: 70vh;
	margin: 0 auto;
	background-color: white;
	padding: 30rpx 26rpx;
	box-sizing: border-box;
	border-radius: 20rpx;
	.top-title-box {
		.t-title {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 10rpx;
			font-weight: 500;
		}
		.t-desc {
			font-size: 28rpx;
			color: #999999;
		}
	}
	.integral-list {
		.integral-l-item {
			padding: 30rpx 0;
			border-bottom: solid 1rpx #F8F8F8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.integral-l-box {
				.integral-l-name {
					font-size: 32rpx;
					color: #333333;
					font-weight: 500;
					margin-bottom: 16rpx;
				}
				.integral-l-label {
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 16rpx;
				}
				.integral-l-time {
					font-size: 28rpx;
					color: #666666;
				}
			}
			.integral-r-num {
				font-size: 44rpx;
				color: #FF6121;
			}
		}
	}
}
</style>
